<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>生产与UAT环境镜像对比</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container {
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 0;
        }
        .table-container {
            flex: 1;
            overflow: auto;
        }
        .filter-section {
            flex-shrink: 0;
        }
        .status-footer {
            flex-shrink: 0;
            padding: 10px;
            font-size: 0.9rem;
        }
        h2 {
            font-size: 1.5rem;
            margin-bottom: 15px !important;
        }
        .btn-refresh {
            margin-left: 10px;
        }
        .status-footer .row > div {
            margin-bottom: 5px;
        }
    </style>
</head>
<body class="p-3">
    <div class="container">
        <h2 class="pt-2">生产环境 vs UAT环境 镜像对比</h2>

        <!-- 加载提示 -->
        <div id="loadingMessage" class="alert alert-info d-none" role="alert">
            镜像状态数据加载中，请稍候...
        </div>

        <!-- 搜索和过滤区域 -->
        <div class="filter-section mb-3">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="input-group mb-2">
                        <input type="text" id="searchInput" class="form-control" placeholder="输入Deployment名称..."
                               value="{{ search_query if search_query else '' }}">
                        <button class="btn btn-outline-secondary" type="button" onclick="clearSearch()">清除</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex flex-wrap align-items-center">
                        <span class="me-2">镜像状态过滤:</span>
                        <div class="btn-group btn-group-sm" role="group">
                            <a href="{{ url_for('index', status='all', search=search_query) }}"
                               class="btn btn-outline-primary {{ 'filter-active' if status_filter == 'all' else '' }}"
                               onclick="showLoading()">全部</a>
                            <a href="{{ url_for('index', status='match', search=search_query) }}"
                               class="btn btn-outline-success {{ 'filter-active' if status_filter == 'match' else '' }}"
                               onclick="showLoading()">一致</a>
                            <a href="{{ url_for('index', status='diff', search=search_query) }}"
                               class="btn btn-outline-warning {{ 'filter-active' if status_filter == 'diff' else '' }}"
                               onclick="showLoading()">不一致</a>
                            <a href="{{ url_for('index', status='not_found', search=search_query) }}"
                               class="btn btn-outline-danger {{ 'filter-active' if status_filter == 'not_found' else '' }}"
                               onclick="showLoading()">未找到</a>
                        </div>
                        <button class="btn btn-sm btn-outline-secondary btn-refresh" onclick="refreshData()">刷新数据</button>
                    </div>
                </div>
            </div>
        </div>

        {% if data %}
        <div class="table-responsive table-container">
            <table class="table table-bordered table-hover">
                <thead class="table-dark" style="position: sticky; top: 0; z-index: 1;">
                    <tr>
                        <th style="color: black;">服务名称</th>
                        <th style="color: black;">生产环境镜像</th>
                        <th style="color: black;">运行时间</th>
                        <th style="color: black;">UAT环境镜像</th>
                        <th style="color: black;">运行时间</th>
                        <th style="color: black;">镜像状态</th>
                    </tr>
                </thead>
                <tbody id="dataTableBody">
                    {% for d in data %}
                    <tr class="{{ 'env-diff' if d.status == 'diff' else 'not-found' if d.status == 'not_found' else '' }}">
                        <td><strong>{{ d.name }}</strong></td>
                        <td>{{ d.images_prod }}</td>
                        <td>{{ d.runtime_prod }}</td>
                        <td>{{ d.images_uat }}</td>
                        <td>{{ d.runtime_uat }}</td>
                        <td>
                            {% if d.status == 'match' %}
                                <span class="badge bg-success">一致</span>
                            {% elif d.status == 'diff' %}
                                <span class="badge bg-warning text-dark">不一致</span>
                            {% else %}
                                <span class="badge bg-danger">未找到</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-danger">未找到任何 deployment。</p>
        {% endif %}

        <div class="status-footer bg-light rounded">
            <div class="row">
                <div class="col-md-4">
                    <strong>连接状态：</strong>
                    <span class="ms-1">生产:</span>
                    <span class="badge bg-{{ 'success' if prom_prod_status == '连接正常' else 'danger' }}">{{ prom_prod_status }}</span>
                    <span class="ms-1">UAT:</span>
                    <span class="badge bg-{{ 'success' if prom_216_status == '连接正常' else 'danger' }}">{{ prom_216_status }}</span>
                </div>
                <div class="col-md-4">
                    <strong>统计信息：</strong>
                    <span>总计: <span id="totalCount">{{ total_count }}</span> 个</span>
                    <span class="ms-1">一致: <span class="text-success" id="matchCount">{{ match_count }}</span></span>
                    <span class="ms-1">不一致: <span class="text-warning" id="diffCount">{{ diff_count }}</span></span>
                    <span class="ms-1">未找到: <span class="text-danger" id="notFoundCount">{{ not_found_count }}</span></span>
                </div>
                <div class="col-md-4 text-md-end">
                    <span class="text-muted">最后更新: {{ update_time }}</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 显示加载提示
        function showLoading() {
            document.getElementById('loadingMessage').classList.remove('d-none');
        }

        // 刷新数据
        function refreshData() {
            showLoading();
            window.location.reload();
        }

        // 页面加载完成后隐藏加载提示（如果有的话）
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('loadingMessage').classList.add('d-none');

            // 初始化所有行数据
            const allRows = Array.from(document.querySelectorAll('#dataTableBody tr'));
            const allData = allRows.map(row => ({
                element: row,
                name: row.querySelector('td:first-child strong').textContent.toLowerCase(),
                status: row.querySelector('td:last-child .badge').textContent
            }));

            // 存储所有数据供搜索使用
            window.allTableData = allData;

            // 初始化统计信息
            updateStatistics(allRows);
        });

        // 搜索功能 - 实时过滤
        document.getElementById('searchInput').addEventListener('input', function() {
            const searchValue = this.value.toLowerCase();
            filterTable(searchValue);
        });

        // 过滤表格数据
        function filterTable(searchValue) {
            const rows = document.querySelectorAll('#dataTableBody tr');
            let visibleCount = 0;
            let matchCount = 0;
            let diffCount = 0;
            let notFoundCount = 0;

            rows.forEach(row => {
                const deploymentName = row.querySelector('td:first-child strong').textContent.toLowerCase();
                const statusBadge = row.querySelector('td:last-child .badge');
                const status = statusBadge ? statusBadge.textContent : '';

                if (deploymentName.includes(searchValue)) {
                    row.style.display = '';
                    visibleCount++;

                    // 更新统计
                    if (status === '一致') matchCount++;
                    else if (status === '不一致') diffCount++;
                    else if (status === '未找到') notFoundCount++;
                } else {
                    row.style.display = 'none';
                }
            });

            // 更新统计信息显示
            document.getElementById('totalCount').textContent = visibleCount;
            document.getElementById('matchCount').textContent = matchCount;
            document.getElementById('diffCount').textContent = diffCount;
            document.getElementById('notFoundCount').textContent = notFoundCount;
        }

        // 更新统计信息
        function updateStatistics(rows) {
            let matchCount = 0;
            let diffCount = 0;
            let notFoundCount = 0;

            rows.forEach(row => {
                const statusBadge = row.querySelector('td:last-child .badge');
                if (statusBadge) {
                    const status = statusBadge.textContent;
                    if (status === '一致') matchCount++;
                    else if (status === '不一致') diffCount++;
                    else if (status === '未找到') notFoundCount++;
                }
            });

            document.getElementById('matchCount').textContent = matchCount;
            document.getElementById('diffCount').textContent = diffCount;
            document.getElementById('notFoundCount').textContent = notFoundCount;
        }

        // 清除搜索
        function clearSearch() {
            const searchInput = document.getElementById('searchInput');
            searchInput.value = '';
            filterTable('');

            // 恢复原始统计信息
            document.getElementById('totalCount').textContent = {{ total_count }};
            document.getElementById('matchCount').textContent = {{ match_count }};
            document.getElementById('diffCount').textContent = {{ diff_count }};
            document.getElementById('notFoundCount').textContent = {{ not_found_count }};
        }

        // 如果URL中有搜索参数，自动填充搜索框
        window.addEventListener('load', function() {
            const urlParams = new URLSearchParams(window.location.search);
            const searchParam = urlParams.get('search');
            if (searchParam) {
                document.getElementById('searchInput').value = searchParam;
                // 触发搜索
                filterTable(searchParam.toLowerCase());
            }
        });
    </script>
</body>
</html>